<template>
  <div class="person">
    姓：<input type="text" v-model="firstName" />
    <br />
    名：<input type="text" v-model="lastName" />
    <br />
    <span>全名:{{ fullName }}</span>
    <br />
    <span>修改后的全名:{{ secondName }}</span>
    <br />
    <button @click="changeName">修改名字</button><br />
    <p>
      小淳带着500元买了两公斤芒果和三公斤榴莲，芒果的价格是{{ mPrice }}，榴莲的价格是{{
        lPrice
      }}，一共花了{{ sumMoney }},还剩下{{ lastMoney }}元。
    </p>
    <button @click="changeMang">芒果价格*2</button>
  </div>
</template>


<script lang="ts" setup>
import { computed, ref } from 'vue'
const firstName = ref('zhang')
const lastName = ref('san')

const fullName = computed(() => {
  // 计算属性 (computed) 必须要有返回值。计算属性本质上是基于它们的依赖进行缓存的函数，目的是根据依赖的数据变化自动计算并返回结果。如果没有返回值，计算属性就无法提供有效的计算结果，可能会导致错误或不可预期的行为。
  // 计算属性的目的是封装某些计算逻辑，通常是在基于现有的响应式数据进行计算后返回一个新的值。它们不应直接修改原始数据，而是依赖于数据的变化来自动更新其返回值。它会根据依赖的响应式数据自动更新，但是它本身并不提供修改的接口。
  // 计算属性会基于它们的依赖进行缓存，只有在依赖的响应式数据发生变化时，计算属性才会重新计算。这使得计算属性在性能上更加高效，避免了不必要的重复计算。
  // 方法是每次调用时都会执行的，不会进行缓存，因此每次调用方法时，都会重新计算。这适用于需要每次执行计算的场景，而不依赖于缓存的优化。
  console.log(1)
  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})

// 如果需要修改数据，可以通过提供 set 方法，允许对计算属性进行赋值，从而间接修改依赖的数据。
const secondName = computed({
  get() {
    // 读取的时候调用
    return (
      firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    )
  },
  set(val) {
    // 修改的时候调用
    console.log('修改后的全名', val)
    const jieGou = val.split('-')
    console.log(jieGou, '解构数组')
    firstName.value = jieGou[0]
    lastName.value = jieGou[1]
  }
})

function changeName() {
  // 计算属性是只读的，无法重新修改属性值
  secondName.value = 'li-si'
  console.log('fullName', fullName)
}

const mPrice = ref(10)
const lPrice = 20
const sumMoney = computed(() => {
  return (mPrice.value + lPrice) * 2
})
const lastMoney = computed(() => {
  return 500 - sumMoney.value
})

function changeMang() {
  mPrice.value = mPrice.value * 2
}
</script>

<style scoped>
.person {
  width: 360px;
  height: 250px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
